<template>
  <el-dialog
    :title="title"
    center
    :visible="open"
    :modal="open"
    @close="close()"
    fullscreen
  >
    <div class="vue-flowchart-editor-container">
      <flowchart-editor
        :read-only="readOnly"
        :key="reRender"
        :chart-data="flowChartData"
        :chart-data-node-items="flowChartNodeItems"
        :showRightInfo="true"
        @save-data="save"
        @reload="reload"
      />
    </div>
  </el-dialog>
</template>
<script>
import FlowchartEditor from "@/flow/cpFlow/flowchartEditor";
import chartData from "@/flow/cpFlow/data";
import uniqueId from 'lodash/uniqueId'
// import dataNodeItems from "@/flow/cpFlow/dataNodeItems";
import cloneDeep from "lodash/cloneDeep";
import "@/flow/cpFlow/iconfont";
import {
  getAll
} from "@/api/cnaps/flowWidget/index";
import {
  getById,
  addFLow,
  updateFLow
} from "@/api/cnaps/flowManager/index";
export default {
  name: "EditNode",
  components: {
    FlowchartEditor,
  },
  props: {
    // 是否只读模式
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: this.$t("common.edit"),
      open: false,
      id: "",
      isUpdate: false,
      reRender: +new Date(),
      flowChartData: {},
      flowChartNodeItems: [],
      // startNode: {
      //   shape: 'flow-circle',
      //   size: '72*72',
      //   color: '#1890FF',
      //   model: {
      //     id: "begin",
      //     label: "开始",
      //     type: 'node'
      //   }
      // }
    };
  },
  mounted() {
    getAll().then(res => {
      let resultObj = res.result;
      let keys = Object.keys(resultObj);
      console.log('keys',keys)
      let finalList = [];
      keys.forEach(item => {

        finalList.push({
          name: item,
          dataList: resultObj[item].map(x => {
            return {model: {
          shape: 'flow-rect',
          color: '#1890FF',
          label: x.title,
          type: 'node',
          component: {
            description: x.shortDescription,
            name: x.name,
            properties: x.paramList
          }
        }}
          })
        })
      });
      console.log('finalList',finalList)

      // list = list.map(x=> {
      //   return {model: {
      //     shape: 'flow-rect',
      //     color: '#1890FF',
      //     label: x.title,
      //     type: 'node',
      //     component: {
      //       description: x.shortDescription,
      //       name: x.name,
      //       properties: x.resultList
      //     }
      //   }}
      // });
      // list.unshift(this.startNode)
      this.flowChartNodeItems = finalList
    })
    this.$on("toggle-read-only", () => {
      this.readOnly = !this.readOnly;
      this.$nextTick(() => {
        this.reRender = +new Date(); // 重新渲染组件
      });
    });
    this.flowChartData = {};
  },
  methods: {
    show(id,isUpdate = false) {
      this.id = id;
      this.isUpdate = isUpdate
      if (isUpdate) {
        getById(this.id).then((res) => {
          if (res.result && res.result != "[]") {

            if(res.result.nodes && res.result.nodes.length > 0) {
              res.result.nodes.forEach(node => {
                  node.x = Number(node.x)
                  node.y = Number(node.y)
                  // node.id = uniqueId()
                })
              }
              if(res.result.edges && res.result.edges.length > 0) {
                res.result.edges.forEach(edge => {
                  edge.x = Number(edge.x)
                  edge.y = Number(edge.y)
                })
              }

            //console.log('加载远程数据')
            this.flowChartData = res.result;
            this.reload(this.flowChartData);
          } else {
            let initData = JSON.parse(JSON.stringify(chartData));
            // 重置数据e
            this.reload(initData);
          }
        });
      } else {
        let initData = JSON.parse(JSON.stringify(chartData));
        // 重置数据
        this.reload(initData);
      }

      this.open = true;
    },
    save(data) {
      // 在这里写数据保存逻辑
      console.log("data", data);
      this.flowChartData = cloneDeep(data);
      this.$set(data,'id',this.id)
      let postData = data;
      if(this.isUpdate) {

        updateFLow(postData).then((res) => {
          this.msgSuccess(this.$t("common.operateSuccess"));
          this.close(true);

        });
      } else {

        addFLow(postData).then((res) => {
          this.msgSuccess(this.$t("common.operateSuccess"));
          this.close(true);
        });
      }
    },
    reload(json) {
      this.flowChartData = json;
      this.reRender = +new Date(); // 重新渲染组件
    },
    // 取消按钮
    close(state = false) {
      this.$emit("editComplete", state);
      this.open = false;
    },
  },
};
</script>

<style>

</style>
